<template>
  <div>
    <el-dialog
      :title="`${form.id ? '修改' : '新增'}目录`"
      :visible.sync="show"
      width="400px"
      @close="close"
    >
      <el-form ref="form" :model="form" :rules="formRules">
        <el-form-item
          label="所属学科 "
          v-if="!$route.query.id"
          prop="subjectID"
          style="margin-left: 10px"
        >
          <el-select v-model="form.subjectID" style="width: 280px">
            <el-option
              v-for="item in subjectNuestions"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input
            v-model="form.tagName"
            style="width: 280px"
            placeholder="请输入标签名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="enitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { update, add } from '@/api/hmmm/tags.js'
export default {
  data () {
    return {
      show: false,
      form: {
        id: null,
        subjectID: null,
        tagName: null,
        subjeceName: null,
      },
      subjectNuestions: [],
      formRules: {
        subjectID: [
          { type: 'number', message: '请选择所属学科', tirgger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', tirgger: 'blur' }
        ]
      },
    }
  },

  async created () {
  },

  methods: {
    async openNew (info) {
      if (info) {
        this.form.id = null
        this.form.subjectID = parseInt(info.id)
      }
      this.show = true
      const { data: res } = await simple()
      this.subjectNuestions = res
    },
    async open (info) {
      if (info) {
        this.form.subjectID = info.subjectID
        this.form.tagName = info.tagName
        this.form.id = info.id
      }
      this.show = true
      const { data: res } = await simple()
      this.subjectNuestions = res
    },
    close () {
      this.show = false
      // 清除校验效果
      this.$refs.form.resetFields()
      this.form.subjectID = null
      this.form.tagName = null
      this.form.id = null
      console.log(this.form)
    },
    // 点击了确定按钮
    enitForm () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 修改
          if (this.form.id) {
            await update(this.form)
          } else {
            // 新增
            console.log(this.form)
            await add({
              subjectID: this.form.subjectID,
              tagName: this.form.tagName
            })
          }
          this.$message.success('操作成功')
          this.$emit('updateList')
          this.show = false
        }
      }
      )
    }
  }
}
</script>

<style scoped lang='less'>
</style>
